<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>专家技术</el-breadcrumb-item>
				<el-breadcrumb-item>团队管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">专家列表</div>
				<div>
					<el-button type="primary" size="mini" class="topButton" round @click="toTop">置顶</el-button>
					<el-button type="primary" size="mini" class="topButton" round @click="addSpecialist">新增</el-button>
				</div>
			</div>
			<div v-if="pageData.items && pageData.items.length > 0">
				<ul class="dataUl">
					<li class="dataLi flex" style="justify-content: space-between;" v-for="item in pageData.items" :class="selectId == item.expertId?'dataIsActive':''" @click="selectDataLi(item)">
						<div class="flex" style="justify-content: space-between;">
							<el-image class="liImage" :src="item.head" fit="cover"></el-image>
							<div>
								<p class="titleName flex">
									<span>{{ item.expertName }}</span>
									<img v-if="item.educational" src="@/assets/image/specialist/mz.png" alt="">
									<img v-if="item.rankName" src="@/assets/image/specialist/nr.png" alt="">
									<img v-if="item.fieldRelation" src="@/assets/image/specialist/sj.png" alt="">
								</p>
								<p class="msgList">教育背景：{{ item.educational?item.educational:'暂无' }}</p>
								<p class="msgList">职称/职务：{{ item.rankName?item.rankName:'暂无' }}</p>
								<p class="msgList">擅长领域：{{ item.fieldRelation?item.fieldRelation:'暂无' }}</p>
							</div>
						</div>
						<el-button type="primary" @click="lookDetails(item.expertId)">查看详情</el-button>
					</li>
				</ul>
				<div class="flex" style="justify-content: space-between;align-items: center;">
					<span style="margin-top: 20px;color: #333333;margin-left: 20px;">共 {{ pageData.totalNum }} 名 专家</span>
					<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
				</div>
			</div>
			<noData v-else></noData>
		</div>
	</div>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: '',
				pageData: '',
				queryData: {
					companyId: '',
					trainingClassId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
				selectId: ''
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 11)
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 212)
			let store = this.$store.state.user
			this.userId = store.userInfo.id

			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId
				
			this.getQueryExpertList()
		},
		watch: {


		},
		methods: {
			paginaClick(val) {
				this.queryData.page = val
				this.getQueryExpertList()
			},
			lookDetails(id) {
				// 查看详情
				this.$router.push(`/entrance/teammanagement/specialistdetail/${id}`)
			},
			addSpecialist() {
				// 新增专家				
				this.$router.push(`/entrance/teammanagement/addspecialist`)
			},
			getQueryExpertList(){
				// 获取专家列表
				this.queryData.companyId = this.companyId
				this.$request.postForm(this.$api.queryExpertList, this.queryData).then(res=>{
					if(res.code == 200){
						this.pageData = res.data
					}
				})
			},
			selectDataLi(item){
				// 选择专家列表
				this.selectId = item.expertId
			},
			toTop(){
				// 置顶
				if(this.selectId){
					this.$request.postForm(this.$api.toTopExpert, {
						expertId: this.selectId
					}).then(res=>{
						if(res.code == 200){
							this.$message.success('置顶成功')
							this.getQueryExpertList()
						}
					})
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		/* margin-bottom: 20px; */
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.dataUl,
	.dataLi {
		width: 100%;
	}

	.dataLi {
		padding: 10px 20px;
		background: #FFFFFF;
		border-bottom: 1px solid #EEEEEE;
		align-items: center;
	}

	.dataIsActive {
		background: #FAFAFA;
	}

	.liImage {
		width: 120px;
		height: 120px;
		margin-right: 30px;
	}

	.el-button--small {
		height: 36px;
		width: 110px;
	}

	.titleName {
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 20px;
		align-items: center;
	}

	.titleName span {
		margin-right: 35px;
	}

	.titleName img {
		margin-right: 10px;
		width: 16px;
		height: 16px;
	}

	.msgList {
		color: #454545;
		font-size: 12px;
		line-height: 22px;
		width: 550px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
